<!DOCTYPE html PUBLIC"-//W3C//DTD HTML 4.0 Transitional//EN"> 
<html>
    <head>
        <meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
        <title>Home Social</title>
    <script language="javascript">
            function Checkform(){   
                var username = document.getElementsByName("tbusername")[0].value;
                var password = document.getElementsByName("tbpassword")[0].value;
                if(username==""||password==""){
                    alert("fill username and password");
                    return false;
                }else{                    
                    return true;				
                }
            }
        </script>
    <style type="text/css">
    .body {
	font-family: "Arial Black", Gadget, sans-serif;
	font-size: 12px;
	font-style: normal;
	color: #000;	
	background-image:url(img/background01.png);
	background-repeat:no-repeat;
	background-size:100%;
	}
	
	.main_form {	
	width: 800px;
	margin-right: auto;
	margin-left: auto;	
	}   
	
    .main_content {  
	margin-top:200px;
    height:800px;
    }
        
    .content {    
	-webkit-background-clip: border-box;
	-webkit-background-origin: padding-box;
	-webkit-background-size: auto;
	-webkit-box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 0px 0px;
	background-attachment: scroll;
	background-clip: border-box;
	background-color: rgba(0, 0, 0, 0);
	background-image: -webkit-linear-gradient(top, rgb(255, 255, 255) 0px, rgb(221, 221, 221) 100%);
	background-origin: padding-box;
	background-size: auto;
	border-bottom-color: rgb(204, 204, 204);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-left-color: rgb(238, 238, 238);
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: rgb(238, 238, 238);
	border-right-style: solid;
	border-right-width: 1px;
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	box-shadow: rgba(0, 0, 0, 0.0980392) 0px 1px 0px 0px;
	color: rgb(51, 51, 51);
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 14px;
	height: 180px;
	line-height: 18px;
	width: 400px;
	margin-left:390px;
	}
	
	.div_row {
		margin-bottom:15px;
	}
	
	.input {
	direction: ltr;
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	height: 25px;
	line-height: 20px;
	margin-bottom: 5px;
	width: 250px;
	margin-left:110px;
	z-index: 1;
	}
	
	.label {
	width:100px;
	float:left;
	color:#000;
	font-size:14px;
	font-weight:bold;
	text-align:right;
	}
	.title {
	-webkit-appearance: none;
	-webkit-border-image: none;
	-webkit-box-align: center;
	-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px;
	-webkit-writing-mode: horizontal-tb;
	background-color: rgb(1, 154, 210);
	background-image: linear-gradient(rgb(51, 188, 239), rgb(1, 154, 210));
	background-repeat: repeat-x;
	border-bottom-color: rgb(5, 126, 208);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-collapse: collapse;
	border-left-color: rgb(5, 126, 208);
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: rgb(5, 126, 208);
	border-right-style: solid;
	border-right-width: 1px;
	border-top-color: rgb(5, 126, 208);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-style: solid;
	border-top-width: 1px;
	box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	cursor: pointer;
	display: block;
	float: right;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	height: 30px;
	letter-spacing: normal;
	line-height: 18px;
	padding-bottom: 5px;
	padding-top: 5px;
	position: relative;
	text-align: center;
	text-indent: 0px;
	text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 1px;
	text-transform: none;
	white-space: nowrap;
	width: 400px;
	word-spacing: 0px;
	writing-mode: lr-tb;
	margin-bottom:20px;
	}
	.button {
	-webkit-appearance: none;
	-webkit-border-image: none;
	-webkit-box-align: center;
	-webkit-box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px;
	-webkit-writing-mode: horizontal-tb;
	background-color: rgb(1, 154, 210);
	background-image: linear-gradient(rgb(51, 188, 239), rgb(1, 154, 210));
	background-repeat: repeat-x;
	border-bottom-color: rgb(5, 126, 208);
	border-bottom-left-radius: 4px;
	border-bottom-right-radius: 4px;
	border-bottom-style: solid;
	border-bottom-width: 1px;
	border-collapse: collapse;
	border-left-color: rgb(5, 126, 208);
	border-left-style: solid;
	border-left-width: 1px;
	border-right-color: rgb(5, 126, 208);
	border-right-style: solid;
	border-right-width: 1px;
	border-top-color: rgb(5, 126, 208);
	border-top-left-radius: 4px;
	border-top-right-radius: 4px;
	border-top-style: solid;
	border-top-width: 1px;
	box-shadow: rgb(255, 255, 255) 0px 1px 0px 0px;
	box-sizing: border-box;
	color: rgb(255, 255, 255);
	cursor: pointer;
	display: block;
	float: right;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 13px;
	font-weight: bold;
	height: 30px;
	letter-spacing: normal;
	line-height: 18px;
	margin-bottom: 0px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	padding-bottom: 5px;
	padding-left: 10px;
	padding-right: 10px;
	padding-top: 5px;
	position: relative;
	text-align: center;
	text-indent: 0px;
	text-shadow: rgba(0, 0, 0, 0.247059) 0px -1px 1px;
	text-transform: none;
	white-space: nowrap;
	width: 106px;
	word-spacing: 0px;
	writing-mode: lr-tb;
	margin-right:40px;
	}
        
    .button:hover {
	background-color: rgb(8, 128, 172);
	background-image: linear-gradient(rgb(18, 161, 214), rgb(4, 119, 162));
	}
	
	.href {
	font-size:18px;
	margin-left:10px;
	padding-top:10px;
	}
	.slogan {
	width: 360px;
	float:left;
	height:200px;
	}
	
	.name {
	color: rgb(253, 149, 18);
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 30px;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	margin-bottom: 3px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	text-align: left;
	text-rendering: optimizelegibility;
	text-shadow: rgb(0, 0, 0) 0px 1px 2px;
	width: 470px;
	}
	
	.slogan_label {
	color: rgb(8, 128, 172);
	display: block;
	font-family: 'Helvetica Neue', Arial, sans-serif;
	font-size: 20px;
	font-weight: bold;
	height: 20px;
	line-height: 20px;
	margin-bottom: 3px;
	margin-left: 0px;
	margin-right: 0px;
	margin-top: 0px;
	text-align: left;
	text-rendering: optimizelegibility;
	text-shadow: rgb(0, 0, 0) 0px 1px 2px;
	width: 360px;
	}
	
	.footer {
	height:184px;
	width:800px;
	background-color:transparent;
	}
    
    </style>
    </head>
    <body class="body">
        <form name="mainform" action="../bus/login.php" method="post" class="main_form" onsubmit="return Checkform();">
            <div class="main_content">
	            <div class="slogan">
                	<label class="name">We bla...</label> <br/>
                    <label class="slogan_label">Discover, connect and share for people that are important to your heart.</label>
                </div>
                <div class="content">
                	<div class="title"></div>
                    <div class="div_row"> 
                    	<label class="label">Username:</label>  
                        <input type="text" name="tbusername" class="input"/>                                            
                    </div>
                    <div class="div_row">
                    	<label class="label">Password:</label>
                        <input type="password" name="tbpassword"  class="input"/>                                      
                    </div>
                    <div  class="div_row">            	
                    	<!--<a href="../page/signup.php" class="href">Registry</a> -->                        
                          <a href="../page/signup.php">
                        <input type="button" id ="registry" class="button" value="Registry"/>
                          </a>                      
                    </div> 
                    <div>
                    	<input type="submit" id ="submit" class="button" value="Sign in"/>
                    </div>
                </div> 
            </div>
        </form> 
    </body>
</html>
